<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>水务规划 - 智能水表抄表系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/styles/main.css">
    <style>
        /* 确保模态窗口不会闪烁 */
        .modal.fade {
            transition: opacity 0.2s linear;
        }
    </style>
</head>

<body>
    <header class="header">
        <h1><i class="fas fa-tint"></i> 智能水表抄表系统</h1>
    </header>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
        <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/"><i class="fas fa-home"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/history"><i class="fas fa-history"></i> 历史记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/bills"><i class="fas fa-file-invoice-dollar"></i> 账单管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/anomalies"><i class="fas fa-exclamation-triangle"></i> 异常记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/water_plans"><i class="fas fa-project-diagram"></i> 水务规划</a>
                    </li>
                    {% if user and user.role == "admin" %}
                    <li class="nav-item">
                        <a class="nav-link" href="/admin"><i class="fas fa-user-shield"></i> 管理控制台</a>
                    </li>
                    {% endif %}
                </ul>
                <div class="navbar-nav">
                    <span class="nav-item nav-link">
                        <i class="fas fa-user"></i> {{ user.username }}
                    </span>
                    <a class="nav-link" href="/logout"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container py-4">
        {% if error %}
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ error }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endif %}

        {% if success %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ success }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endif %}

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h2><i class="fas fa-project-diagram"></i> 水务规划</h2>
                    {% if user and user.role == "admin" %}
                    <a href="/add_water_plan" class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加新规划
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 规划统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-4 mb-4">
                <div class="card bg-info text-white">
                    <div class="card-body text-center">
                        <i class="fas fa-project-diagram fa-3x mb-3"></i>
                        <h3>{{ plans|length }}</h3>
                        <p>总规划数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card bg-primary text-white">
                    <div class="card-body text-center">
                        <i class="fas fa-play-circle fa-3x mb-3"></i>
                        <h3>{{ plans|selectattr('status', 'equalto', 'active')|list|length }}</h3>
                        <p>已实施规划</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card bg-secondary text-white">
                    <div class="card-body text-center">
                        <i class="fas fa-file-alt fa-3x mb-3"></i>
                        <h3>{{ plans|selectattr('status', 'equalto', 'draft')|list|length }}</h3>
                        <p>草稿规划</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h3 class="card-title mb-0"><i class="fas fa-list"></i> 水务规划列表</h3>
            </div>
            <div class="card-body">
                {% if plans %}
                <div class="table-container">
                    <table class="custom-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>规划标题</th>
                                <th>区域</th>
                                <th>人口</th>
                                <th>预计用水量</th>
                                <th>状态</th>
                                <th>制定日期</th>
                                <th>实施日期</th>
                                <th>详情</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for plan in plans %}
                            <tr>
                                <td>{{ plan.id }}</td>
                                <td>{{ plan.plan_title }}</td>
                                <td>{{ plan.area }}</td>
                                <td>{{ plan.population }}</td>
                                <td>{{ plan.estimated_usage }} m³</td>
                                <td>
                                    {% if plan.status == 'active' %}
                                    <span class="badge bg-success">已实施</span>
                                    {% elif plan.status == 'pending' %}
                                    <span class="badge bg-warning">待实施</span>
                                    {% else %}
                                    <span class="badge bg-secondary">草稿</span>
                                    {% endif %}
                                </td>
                                <td>{{ plan.plan_date }}</td>
                                <td>{{ plan.implementation_date }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-info view-plan-details" 
                                        data-plan-id="{{ plan.id }}">
                                        <i class="fas fa-eye"></i> 详情
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> 暂无水务规划记录
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 规划详情模态框 - 移到外部避免重复和闪烁问题 -->
    <div class="modal fade" id="planDetailsModal" tabindex="-1" aria-labelledby="planDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="planDetailsModalLabel">水务规划详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="planDetailsContent">
                    <!-- 内容将通过JavaScript动态加载 -->
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">正在加载详情...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    {% if user and user.role == "admin" %}
                    <button type="button" class="btn btn-primary" id="editPlanButton">编辑规划</button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 智能水表抄表系统 | 提供水表读数和编码识别</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    
    <script>
        // 当文档加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取模态窗口元素
            const planDetailsModal = new bootstrap.Modal(document.getElementById('planDetailsModal'), {
                backdrop: 'static',
                keyboard: false
            });
            
            // 获取所有"详情"按钮
            const viewButtons = document.querySelectorAll('.view-plan-details');
            
            // 为每个按钮添加点击事件
            viewButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // 获取规划ID
                    const planId = this.getAttribute('data-plan-id');
                    
                    // 从页面中查找对应规划的详细信息
                    const plansData = JSON.parse('{{ plans|tojson|safe }}');
                    const plan = plansData.find(p => p.id === parseInt(planId));
                    
                    if (plan) {
                        // 设置模态窗口标题
                        document.getElementById('planDetailsModalLabel').textContent = `水务规划详情: ${plan.plan_title}`;
                        
                        // 设置模态窗口内容
                        const statusClass = plan.status === 'active' ? 'success' : 
                                          (plan.status === 'pending' ? 'warning' : 'secondary');
                        const statusText = plan.status === 'active' ? '已实施' : 
                                          (plan.status === 'pending' ? '待实施' : '草稿');
                        
                        // 计算人均用水量
                        const perCapitaUsage = (plan.estimated_usage / plan.population).toFixed(2);
                        
                        // 更新模态窗口内容
                        document.getElementById('planDetailsContent').innerHTML = `
                            <div class="mb-3">
                                <div class="badge bg-${statusClass} mb-2">
                                    ${statusText}
                                </div>
                                <h4>${plan.plan_title}</h4>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>区域:</strong> ${plan.area}
                                </div>
                                <div class="col-md-6">
                                    <strong>估计人口:</strong> ${plan.population}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>预计用水量:</strong> ${plan.estimated_usage} m³
                                </div>
                                <div class="col-md-6">
                                    <strong>人均用水量:</strong> ${perCapitaUsage} m³
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>规划制定日期:</strong> ${plan.plan_date}
                                </div>
                                <div class="col-md-6">
                                    <strong>计划实施日期:</strong> ${plan.implementation_date}
                                </div>
                            </div>

                            <div class="mb-3">
                                <strong>详细描述:</strong>
                                <div class="p-3 bg-light rounded mt-2">
                                    <p>${plan.description}</p>
                                </div>
                            </div>
                        `;
                        
                        // 设置编辑按钮的数据属性
                        const editButton = document.getElementById('editPlanButton');
                        if (editButton) {
                            editButton.setAttribute('data-plan-id', planId);
                        }
                        
                        // 显示模态窗口
                        planDetailsModal.show();
                    } else {
                        console.error('找不到指定ID的规划:', planId);
                    }
                });
            });
            
            // 编辑按钮点击事件
            const editButton = document.getElementById('editPlanButton');
            if (editButton) {
                editButton.addEventListener('click', function() {
                    const planId = this.getAttribute('data-plan-id');
                    if (planId) {
                        // 关闭模态窗口
                        planDetailsModal.hide();
                        // 跳转到编辑页面
                        window.location.href = `/edit_water_plan/${planId}`;
                    }
                });
            }
        });
    </script>
</body>

</html> 